<template>
  <div class="home">
    <div class="home-header-cntainer">
      <div>admin</div>
      <div>logout</div>
      <div>
        <img src="../assets/cart.png" @click="tocart" alt />
      </div>
    </div>
    <div class="home-content">
      <div class="home-sotr-container">
        <div class="sotr-by">Sort by</div>
        <div class="sort-default">Default</div>
        <div class="sotr-price">
          <div @click="onSotr">price</div>
          <div v-show="!imgshow">
            <img src="../assets/down.png" alt />
          </div>
          <div v-show="imgshow">
            <img src="../assets/up.png" alt />
          </div>
        </div>
      </div>
      <div class="home-content-wrapper">
        <!-- 左侧内容 -->
        <div class="home-slider">
          <h4>PRICE:</h4>
          <div
            v-for="(item,index) in sliderlist"
            :key="index"
            :class="current===index? 'slider-left-item-active' : 'slider-left-item' "
            @click="changecurrent(index,item)"
          >{{item.title}}</div>
        </div>
        <!-- 右侧商品列表 -->
        <div class="home-right">
          <el-row :gutter="10">
              <el-col
            :xs="24"
            :sm="8"
            :md="8"
            :lg="6"
            :xl="6"
            v-for="(item,index) in storeshow"
            :key="index"
          >
            <div class="home-right-item">
              <div class="store-item-img">
                <img :src="item.productImage" alt />
              </div>
              <div class="store-right">
                <div class="store-item-name">{{item.productName}}</div>
                <div class="store-item-price">{{item.salePrice}}</div>
                <div class="store-item-tocart" @click="onClick(item)">加入购物车</div>
              </div>
            </div>
            <!-- 窗口768内容 -->
            <div class="show-right-item">
              <div class="show-item-img">
                <img :src="item.productImage" alt />
              </div>
              <div class="show-right">
                <div class="show-item-name">{{item.productName}}</div>
                <div class="show-item-price-wrapper">
                  <div class="show-item-price">{{item.salePrice}}</div>
                  <div class="show-item-tocart">加入购物车</div>
                </div>
              </div>
            </div>
              </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="loading-cotainer" v-show="loading">
        <img src="../assets/loading.jpg" alt="">
    </div>
  </div>
</template>
<script>
import "../css/home.css";
// import Axios from "axios";
export default {
    data(){
        return{
            sliderlist:[],
            storelist:[],
            storeshow:[],
            current:0,
            imgshow:false,
            sortadd:1,
            loadimg:false,
            bool:false
        };
    },
    methods:{
        changecurrent(index,item){
            this.current=index;
            let temp = [];
            if(item.title == "ALL"){
                temp = this.storelist;
            }else{
                this.storelist.forEach(ele =>{
                    if(ele.salePrice <=item.hight && ele.salePrice > item){
                        temp.push(ele);
                    }   
                });
            }
        }
    }
};
</script>

<style>
</style>    